<template>
	<scroll-view class="member-center" scroll-y @touchstart="handleTouchStart" @touchmove="handleTouchMove"
		@touchend="handleTouchEnd">
		<view class="container" :style="{ paddingTop: bgHeight + 'rpx' }">
			<navBar :title="t('sampleOrderManagement.title')"></navBar>
			<tn-tabs v-model="currentTabIndex" class="tabs_box" color="#999999" active-color="#FD2D55"
				bar-color="#FD2D55">
				<TnTabsItem v-for="(item, index) in tabsData" :key="index" :title="item.text" class="tab_item">
				</TnTabsItem>
			</tn-tabs>
			<view class="sampleOrderManagement_tip">
				Sellers may reject to send samples for various reasons, but uChoice encourages more sample requests,
				promotion, and sales!`1
			</view>
			<view class="sampleOrderManagement_nodata">
				<image src="/static/noData.png" mode="" class="img"></image>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import navBar from "../../components/navBar/index.vue"
	import TnTabsItem from "../../uni_modules/tuniaoui-vue3/components/tabs/src/tabs-item.vue"
	import {
		useI18n
	} from 'vue-i18n'
	const {
		t
	} = useI18n()
	const currentTabIndex = ref(0)
	const tabsData = [{
			text: t("common.all"),
		},
		{
			text: t("sampleOrderManagement.PendingReview"),
		},
		{
			text: t("sampleOrderManagement.shipped"),
		},
		{
			text: t("sampleOrderManagement.PendingFulfill"),
		},
	]

	const bgHeight = ref(88); // 初始背景高度
	const startY = ref(0)
	const contentMarginTop = ref(0); // 让内容同步向下移动
	// 记录起始触摸点
	const handleTouchStart = (e) => {
		startY.value = e.touches[0].pageY;
	};

	// 计算下拉位移
	const handleTouchMove = (e) => {
		let moveY = e.touches[0].pageY - startY.value;
		// contentMarginTop.value = moveY
		if (moveY > 0) {
			bgHeight.value = Math.min(88 + moveY, 250); // 背景最大高度 450px
			contentMarginTop.value = Math.min(0 + moveY, 150); // 内容同步向下移动
		}
	};

	// 松手后恢复
	const handleTouchEnd = () => {
		const timer = setInterval(() => {
			if (bgHeight.value > 88) {
				bgHeight.value -= 5;
				contentMarginTop.value -= 5;
			} else {
				clearInterval(timer);
			}
		}, 10);
	};
</script>

<style>
	.container {
		min-height: 100vh;
		background: url("../../static/my/bg.png") no-repeat center center / cover;
	}

	.tab_item {
		height: 32rpx;
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		line-height: 32rpx;
		margin-right: 52rpx;
		background-color: transparent;
	}

	.tabs_box {
		width: 90% !important;
		margin: 60rpx auto 24rpx;
		/* margin-bottom: 24rpx; */
	}

	.tn-tabs {
		background-color: transparent !important;
		box-shadow: none !important;
		margin-bottom: 24rpx;
	}


	.sampleOrderManagement_tip {
		width: 686rpx;
		height: 110rpx;
		background: #f1d0d9;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: auto;
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #FD2D55;
		line-height: 32rpx;
		padding: 20rpx 20rpx;
		margin-top: 20rpx;
	}

	.sampleOrderManagement_nodata {
		margin: 256rpx auto 0;
		text-align: center;

		.img {
			width: 200rpx;
			height: 200rpx;
		}
	}
</style>